Skip to content

Durga-html-project#528

Open
Saidurgasatturi wants to merge 4 commits intoaptyInc:mainfrom
Saidurgasatturi:durga-html-project
Open

Durga-html-project#528
Saidurgasatturi wants to merge 4 commits intoaptyInc:mainfrom
Saidurgasatturi:durga-html-project

Conversation

@Saidurgasatturi
Copy link
Copy Markdown

@Saidurgasatturi Saidurgasatturi commented Sep 30, 2025

Terms and Conditions

  • I Accept losing points if my PR does not follow the best practices mentioned below, which will impact my overall performance in training

HTML Best Practices

  • File Naming Convention:

  • Follow consistent and descriptive naming (e.g., dashboard.html, user-profile.html).

  • Use lowercase letters and hyphens instead of spaces.

  • Page Title:

  • Ensure the <title> tag is descriptive and aligns with the page content.

  • Include meaningful keywords for SEO if applicable.

  • Semantic Markup:

  • Use appropriate tags like <header>, <footer>, <section>, <article> for better readability and accessibility.

  • Accessibility Standards:

  • Ensure the use of alt attributes for images and proper labels for form elements.

  • Use ARIA roles where necessary.

  • Validation:

  • Ensure the code passes HTML validation tools without errors or warnings.

  • Structure and Indentation:

  • Maintain consistent indentation and proper nesting of tags.

  • Attributes:

  • Ensure all required attributes (e.g., src, href, type, etc.) are correctly used and not left empty.

CSS Best Practices

  • File Organization:

  • Use modular CSS files if applicable (e.g., base.css, layout.css, theme.css).

  • Avoid inline styles unless absolutely necessary.

  • Naming Conventions:

  • Use meaningful class names following BEM or other conventions (e.g., block__element--modifier).

  • Code Reusability:

  • Avoid duplicate code; use classes or mixins for shared styles.

  • Responsive Design:

  • Ensure proper usage of media queries for mobile, tablet, and desktop views.

  • Performance Optimization:

  • Minimize the use of unnecessary CSS selectors.

  • Avoid overly specific selectors and ensure selectors are not overly deep (e.g., avoid #id .class1 .class2 p).

  • Consistency:

  • Follow consistent spacing, indentation, and use of units (rem/em vs. px).

  • Maintain a single coding style (e.g., always use double or single quotes consistently).

Javascript Best Practices

  • File Organization:

  • Ensure scripts are modular and logically separated into files if needed.

  • Avoid mixing inline JavaScript with HTML.

  • Logic Optimization:

  • Check for redundancy and ensure the code is optimized for performance.

  • Avoid unnecessary API calls or DOM manipulations.

  • Solution Approach:

  • Confirm that the code solves the given problem efficiently.

  • Consider scalability for future enhancements.

  • Readability:

  • Use clear variable and function names.

  • Add comments for complex logic or algorithms.

  • Error Handling:

  • Ensure proper error handling for API calls or user input validation.

  • Code Quality:

  • Check for potential bugs (e.g., missing await, mishandling of null/undefined values).

  • Avoid unnecessary console.log statements in production code.

  • Security:

  • Avoid hardcoding sensitive data.

  • Sanitize user input to prevent XSS and other vulnerabilities.

  • Best Practices:

  • Use const and let instead of var.

  • Follow ES6+ standards where applicable.

@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello @Saidurgasatturi, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a collection of new front-end projects, primarily focusing on HTML and CSS implementation. The changes include a responsive webpage layout, a demonstration of CSS animations and media queries, a personal homepage built with semantic HTML, and a product landing page. These projects showcase fundamental web development concepts and are integrated into a larger project index.

Highlights

  • New CSS Layout: Introduced a new CSS file (css/advanced/Assignment-1/style.css) that defines a basic responsive layout for a webpage, including styles for header, navigation, main content (with article and aside sections), and footer, adapting to different screen sizes.
  • CSS Animations and Responsiveness Demo: Added a new HTML file (css/advanced/Assignment-2/animations.html) demonstrating CSS animations with a bouncing box effect and responsive design using media queries to adjust the box's size and color based on viewport width.
  • Personal Homepage Project: Created a new personal homepage project (html/5-projects/Project-1/semantics.html and html/5-projects/Project-1/style.css) utilizing semantic HTML5 elements for structure and a dedicated CSS file for styling, including sections for personal details, education, skills, and a contact form.
  • Product Landing Page Project: Implemented a new product landing page project (html/5-projects/Project-2/productlanding.html) featuring a navigation bar, product features, an embedded YouTube video, a pricing table, and contact information.
  • Project Integration: Modified the main html/5-projects/index.html file to include a new expandable section for 'SaiDurga', providing an entry point for the newly added projects.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces several new HTML and CSS files for various assignments, showcasing an understanding of semantic HTML, CSS layouts, and animations. The code is generally well-structured. However, there are several opportunities for improvement. My review focuses on adhering to modern web standards by replacing deprecated HTML attributes with CSS, correcting CSS selectors, improving form structure and semantics, and ensuring all linked files exist. I've also pointed out where CSS could be better organized by moving it to external files, following the best practices outlined in the pull request description.

font-weight: bold;
}

input, text, button {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The text selector is not a valid HTML element selector. If you intended to style a multi-line text input, you should use the textarea selector. I've also recommended changing the message field in semantics.html from an <input> to a <textarea>.

Suggested change
input, text, button {
input, textarea, button {

</details>
<details>
<summary onclick="showContent(event)">SaiDurga</summary>
<iframe data-src="./saidurga/index.html"></iframe>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The path data-src="./saidurga/index.html" points to a file that does not exist in this pull request. This will result in a broken iframe when this content is loaded. Please ensure the path is correct and that the target file is included in the project structure.

font-size: 1rem;
}

text {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Similar to the previous comment, the text selector here is invalid. This should be textarea to correctly apply styles to a <textarea> element.

Suggested change
text {
textarea {

<section id="Education">
<h2> Educational Details </h2>
<ul>
<li>Graduated in Sreenidhi institute of science and technologt (2021-2025)</li>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There is a typo in "technologt". It should be "technology".

Suggested change
<li>Graduated in Sreenidhi institute of science and technologt (2021-2025)</li>
<li>Graduated in Sreenidhi institute of science and technology (2021-2025)</li>

Comment on lines +36 to +48
<input type="text" id="name" name="name" required><br><br>

<label for="phno">Phone Number:</label>
<input type="number" id="phno" name="phone number" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="date">Date:</label>
<input type="date" id="date" name="date" required><br><br>

<label for="message">Message:</label>
<input type="text" id="message" name="message" required><br><br>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using <br> tags for spacing between elements is not a best practice. Layout and spacing should be handled by CSS using properties like margin or padding. This provides better control, is more maintainable, and separates structure (HTML) from presentation (CSS). Please remove the <br> tags and use CSS to style the form layout.

@media (max-width: 768px) {
main {
flex-direction: column;
flex:1;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The flex: 1 property here has no effect because the main element is not a flex item (its parent, body, is not a flex container). This line is redundant and can be removed without changing the layout.

<h2>About Me</h2>
<p>Enthusiastic web developer</p>
</section>
<section id="Education">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It is a common convention to use lowercase for id and class attributes to ensure consistency across the codebase. Consider changing Education to education.

Suggested change
<section id="Education">
<section id="education">

Comment on lines +37 to +38
<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"
title="Product Demo" frameborder="0" allowfullscreen></iframe>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The frameborder attribute is obsolete in HTML5. The modern approach is to control element borders using CSS. I recommend creating a stylesheet for this project and adding a rule like iframe { border: none; } to remove the border.


<section id="plans">
<h2>Choose Your Plan</h2>
<table border="1">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The border attribute on the <table> element is obsolete in HTML5. All styling, including borders, should be handled with CSS for better separation of concerns and maintainability. Please create and link a stylesheet to style the table borders. You could add rules like table, th, td { border: 1px solid black; } and table { border-collapse: collapse; } to achieve a similar visual effect.

Comment on lines +7 to +55
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
background: #3498db;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}
@media (max-width: 768px) {
.box {
width: 120px;
height: 120px;
font-size: 14px;
background: #e67e22;
}
}

@media (max-width: 480px) {
.box {
width: 90px;
height: 90px;
font-size: 12px;
background: #2ecc71;
}
}
</style>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The CSS styles are embedded within the HTML file using a <style> tag. According to the best practices mentioned in the PR description, CSS should be in separate files for better organization, reusability, and maintainability ('Use modular CSS files'). Please move these styles to an external .css file and link it using the <link> tag in the <head>.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant